<template>
  <div class="play-list">
	<div class="play-list-content">
		<div v-for="(item,index) in MusicList" :key="index" class="play-list-flex">
			<div @click="enterMusicListDetail(index)">
			<div class="artist-img">
				<div class="artist-img-top">{{item.playCount}}</div>
				<el-image
				      style="width: 180px; height: 180px"
				      :src="item.coverImgUrl"
				 ></el-image>
					<div class="artist-img-bottom">
					<i class="iconfont icon-icon_play"></i>
					</div>
			</div>
			<div style="font-size: 14px;width: 180px;">{{item.name}}</div>
		</div>
		</div>
		
	</div>
	
  </div>
</template>

<script>


export default {
  name:'MusicList',
  props:['MusicList','total'],
  data(){
    return{
      
    }
  },
  created(){
	 console.log()
  },
  filters:{
  },
  methods:{
     enterMusicListDetail(index){
		 this.$router.push(
		   "/musiclistdetail/" +
		     this.MusicList[index].id +
		     "/" +
		     new Date().getTime()
		 );
	 }
  }
}
</script>

<style lang="less" scoped>
    .play-list{
		width: 100%;
		height: auto;
		.play-list-content{
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
	}
    .play-list-flex{
		padding: 10px 10px 20px 10px;
		
		.artist-img{
		    position: relative;
			width: 180px;
			height: 180px;
			.artist-img-top{
				    z-index: 1;
				    width: 100%;
				    padding: 0.21429rem 0;
				    text-align: right;
				    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
					display: none;
				    position: absolute;
				    top: 0;
				    right: 0;
				    color: #f6f6f6;
				    font-size: 0.92857rem;
			}
			.artist-img-bottom{
				    // width: 2.14286rem;
				    // height: 2.14286rem;
					width: 50px;
					height: 50px;
				    position: absolute;
				    left: 10px;
				    bottom: 0.57143rem;
				    border-radius: 50%;
				    background: rgba(255, 255, 255, 0.5);
					display: none;
					.icon-icon_play{
						position: absolute;
						left: 16px;
						top: 16px;
					}
					
			}
		}
		
	}
	.artist-img:hover .artist-img-bottom{
			display: block;
		
	}
	.artist-img:hover .artist-img-top{
			display: block;
		
	}
</style>

